<template>
  <div class="mobile-details-song yu-bgColor-tew-only flex flex-col h-full justify-between p-2" style="height:calc(100vh - 120px)">
    <div class="h-20 flex items-center yu-color-text justify-between">
      <span class="inline-block i-mdi-keyboard-return mr-2 text-xl yu-textColor-active" @click="back"></span>
      <span class="w-75 truncate">{{ store.playlistInfo[store.songUrlIndex]?.name }} -- {{ store.playlistInfo[store.songUrlIndex]?.ar[0]?.name }}</span>
      <img class="w-15 h-15 mr-2 rounded-full" :class="store.audioOptions.isPaused ? '' : 'animate-spin'" :src="store.playlistInfo[store.songUrlIndex]?.al?.picUrl" alt=""/>
    </div>
    <!-- 歌词 -->
    <Lyric />
    <!--移动端控件-->
    <Control />
  </div>
</template>

<script setup>
import Control from './components/Control/index.vue'
// 歌词
import Lyric from '@/components/Lyric/index.vue'
import {useStore} from "../../store/index.js";
import {useRouter} from "vue-router";

const store = useStore()
const router = useRouter()

const back = () => {
  router.replace({
    path: '/'
  })
}
</script>

<style scoped lang="scss">

</style>
